<template>
	<div>  
		<div class=" project_bk"></div>
		<div class="main" >
			<el-row type="flex" justify="center"  align="middle">
				<el-col :span="24" :offset="0">
					<h2 class=" animate__animated animate__fadeInRight">Our projects</h2>
				</el-col>
			</el-row>
			<el-row type="flex" justify="center"  align="middle" style="margin-bottom: 20px;">
				<el-col :span="14" :offset="0">
					<p class="animate__animated animate__fadeInLeft">5704 studio has many projects, and there are many project leaders, and the members of each project are also different. You can click to view the details and progress of each project.</p>
				</el-col>
				
			</el-row>
			
			<el-row type="flex" justify="center" :gutter="10" class="animate__animated animate__fadeInDown">
				<el-col :span="10" v-if="!isCreate">
					<el-input
						placeholder="请输入内容"
						v-model="ser"
						clearable
						>
						<el-button slot="append" icon="el-icon-search" @click="search(1)"></el-button>
					</el-input>
				</el-col>
				<el-col :span="1" >
					<el-button type="success"  icon="el-icon-plus" @click="isCreate = !isCreate" v-if="!isCreate"></el-button>
				</el-col>
			</el-row>
			
			<template  v-if="isCreate">
				<proCreate :proForm="proForm" @reCreate="isCreate = false"></proCreate>
			</template>
			
			
			<el-row :gutter="40"  type="flex" justify="center" align="middle" v-else v-loading="loading">
				<el-col :span="18" :offset="0" style="display: flex; flex-wrap: wrap;">
					<el-col  :xs="12" :sm="12" :md="12" :lg="8" :xl="8"  v-for="(item,n) in pro" :key="n">
						<el-card  class="card1 animate__animated animate__fadeInUp">
							
							<el-image :src="item.picture" @click="Mprint(item)" style="border-radius: 20px;"></el-image>
							
							<div style="justify-self: center;" class="button"  @click="Mprint(item)"  >{{item.projectName}}</div>
						
						</el-card>
					</el-col>
				</el-col>
			</el-row>
			
			<el-row v-if="!isCreate && !isSearch" class="animate__animated animate__fadeInUp">
				<el-col :span="24">
					<div style="margin-top:2%;margin-bottom: 2%;;">
					<el-pagination
						@current-change="load"
						background
						page-size="9"
						layout="prev, pager,next "
						:total="total">
					</el-pagination>
					</div>
				</el-col>
			</el-row>
			<el-row v-if="!isCreate && isSearch" class="animate__animated animate__fadeInUp">
				<el-col :span="24">
					<div style="margin-top:2%;margin-bottom: 2%;;">
					<el-pagination
						@current-change="search"
						background
						page-size="9"
						layout="prev, pager,next "
						:total="total">
					</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
		
		<proDetail :pro="pro"></proDetail>
	</div>
	
</template>

<script>
	import proCreate  from '../components/proCreate.vue' 
	import proDetail  from '../components/proDetail.vue' 
	
	export default {
		components: {
		  proCreate,
		  proDetail
		},
		data: function() {
			
			return {
				isSearch:false,
				proForm:{
					detail:"",
					name:"",
					userNum:"",
					teacher:"",
					type1:"",
					type2:"",
				},
				pro:[],
				ser:"",
				total:10,
				isCreate:false,
				
				other:false,
				loading:false
			}
		},
		methods: {
			// reCreate:function(val){
			// 	this.isCreate = false
			// },
			search:async function(n){
				this.isSearch = true
				this.loading = true;
				let res = await this.text("project/getNum?isSearch="+this.ser)
					
					if (res.code === 200) {
						this.total = res.data.num
						this.$message({
							message: '找到'+res.data.num+"个项目",
							type: 'success'
							});
					}else if (res.code === 50014) {
					
					this.$message.error('用户权限不足');
				}else{
						this.$message.error('请求失败或者接口返回失败');
					}
				let b = (n-1) * 9
				let e = n * 9
				res = await this.text(this.$api.searchProject+"?name="+this.ser+"&page="+b+"&num="+e)
				
				if (res.code === 200) {
					this.pro.length=0
					res.data.forEach(e => {
						this.pro.push({
							leader:e.project.leader.name,
							members:e.members,
							detail:e.project.introduce,
							projectName:e.project.name,
							isPrint:0,
							userNum:e.project.userNum,
							teacher:e.project.instructor,
							type:e.project.type,
							id:e.project.id,
							time: this.$dateFormat(e.project.createTime)  
						})
					});
					
				}else if (res.code === 50014) {
					
					this.$message.error('用户权限不足');
				}else{
						this.$message.error('请求失败或者接口返回失败');
				} 
				this.loading = false;
			},
			
			
			Mprint: function (n) {

				for (let i = 0; i < this.pro.length; i++) {
					this.pro[i].isPrint=0
				}
				n.isPrint=!n.isPrint
			},
			load:async function (n) {
				this.loading = true;
				
					this.pro.length = 0;
					this.pro.push()
					let b = (n-1) * 9
					let e = n * 9
					let res = await this.text(this.$api.showManyProject+"?page="+b+"&num="+e)
					
					if (res.code === 200) {
						let _this =this
						res.data.forEach(e => {
							this.pro.push({
								src:require('../assets//img/6.jpg'),
								leader:e.project.leader.name,
								members:e.members,
								detail:e.project.introduce,
								projectName:e.project.name,
								isPrint:0,
								userNum:e.project.userNum,
								teacher:e.project.instructor,
								type:e.project.type,
								id:e.project.id,
								time: this.$dateFormat(e.project.createTime)  ,
								picture:this.$api.picTemplate+e.project.picture
							})
						});
					}else if (res.code === 50014) {
					
					this.$message.error('用户权限不足');
				}else{
						this.$message.error('请求失败或者接口返回失败');
					} 
					this.loading = false;
				 
			}

		},
		async created() {
                // 在created发送请求
                // 1. 可以获取到data中的数据
                // 2. 不能操作DOM的
                //
				if(!this.$GLOBAL.isInsider){
							this.$router.push("login")
						this.$message.error('用户权限不足');
					}else{
						
						let res = await this.text("project/getNum","","get")
							
							if (res.code === 200) {
								this.total = res.data.num
								this.load(1)
							}
					}
				
				
                   
            },
	}
		
	
</script>

<style scoped>
  @import url("../assets/style/pro.css");
	@import url("../assets/style/login.css");
</style>